<template>
	<view class="page_box">
		<conduct></conduct>
		<view class="banner-box">
			<view class="bar_a">
				<text class="text-a">欢太金融理财平台</text>
			</view>
			<view>
				<text class="text-b">欢太理财 一分托付·十分负责</text>
			</view>
		</view>
		<view class="nav_box">
			<navigator animation-type="zoom-fade-out" animation-duration="300" url="../fund_Bone/fund_Bone">
				<view class="nav_textbox">
					<image src="../../static/image/icon_licai_jingangqu_jijin@2x.png" mode=""></image>
					<view class="text_box"><text>基金</text></view>
				</view>
			</navigator>
			<navigator animation-type="zoom-fade-out" animation-duration="300"
				url="/pages/current_eighteen/current_eighteen">
				<view class="nav_textbox">
					<image src="../../static/image/icon_licai_jingangqu_huoqi@2x.png" mode=""></image>
					<view class="text_box"><text>活期</text></view>
				</view>
			</navigator>
			<navigator animation-type="zoom-fade-out" animation-duration="300" url="/pages/fix_seventeen/fix_seventeen">
				<view class="nav_textbox">
					<image src="../../static/image/icon_licai_jingangqu_dingqi@2x.png" mode=""></image>
					<view class="text_box"><text>定期</text></view>
				</view>
			</navigator>
			<navigator
				animation-type="zoom-fade-out"
				animation-duration="300"
				url="../gold/GOld1"
			>
				<view class="nav_textbox">
					<image src="../../static/image/icon_licai_jingangqu_huangjin@2x.png" mode=""></image>
					<view class="text_box"><text>黄金</text></view>
				</view>
			</navigator>

			<view class="nav_textbox">
				<image src="../../static/image/icon_licai_jingangqu_quangshang@2x.png" mode=""></image>
				<view class="text_box"><text>卷商</text></view>
			</view>
		</view>
		<view class="bar_profit">
			<image src="../../static/image/img_licai_banner@2x.png" mode=""></image>
		</view>
		<view class="new_vip"><text>新客首投专享</text></view>
		<view class="scroll_bor">
			<scroll-view class="scroll_box" scroll-x="true">
				<view class="scr_A">
					<text class="title_box">小金罐</text>
					<view class="content_box">
						<view class="scr_left">
							<text>4.392%</text>
							<text>近一个月年化收益率</text>
						</view>
						<view class="scr_right">
							<text>
								60
								<text>天</text>
							</text>
							<text>投资期限</text>
						</view>
					</view>
				</view>
				<view class="scr_A">
					<text class="title_box">安信鑫</text>
					<view class="content_box">
						<view class="scr_left">
							<text>12.33%</text>
							<text>近一个月年化收益率</text>
						</view>
						<view class="scr_right">
							<text>
								60
								<text>天</text>
							</text>
							<text>投资期限</text>
						</view>
					</view>
				</view>
				<view class="scr_A">
					<text class="title_box">小金罐</text>
					<view class="content_box">
						<view class="scr_left">
							<text>4.392%</text>
							<text>近一个月年化收益率</text>
						</view>
						<view class="scr_right">
							<text>
								60
								<text>天</text>
							</text>
							<text>投资期限</text>
						</view>
					</view>
				</view>
				<view class="scr_A">
					<text class="title_box">小金罐</text>
					<view class="content_box">
						<view class="scr_left">
							<text>4.392%</text>
							<text>近一个月年化收益率</text>
						</view>
						<view class="scr_right">
							<text>
								60
								<text>天</text>
							</text>
							<text>投资期限</text>
						</view>
					</view>
				</view>
				<view class="scr_A">
					<text class="title_box">安信鑫</text>
					<view class="content_box">
						<view class="scr_left">
							<text>12.33%</text>
							<text>近一个月年化收益率</text>
						</view>
						<view class="scr_right">
							<text>
								60
								<text>天</text>
							</text>
							<text>投资期限</text>
						</view>
					</view>
				</view>
				<view class="scr_A">
					<text class="title_box">小金罐</text>
					<view class="content_box">
						<view class="scr_left">
							<text>4.392%</text>
							<text>近一个月年化收益率</text>
						</view>
						<view class="scr_right">
							<text>
								60
								<text>天</text>
							</text>
							<text>投资期限</text>
						</view>
					</view>
				</view>
				<view class="scr_A">
					<text class="title_box">小金罐</text>
					<view class="content_box">
						<view class="scr_left">
							<text>4.392%</text>
							<text>近一个月年化收益率</text>
						</view>
						<view class="scr_right">
							<text>
								60
								<text>天</text>
							</text>
							<text>投资期限</text>
						</view>
					</view>
				</view>
				<view class="scr_A">
					<text class="title_box">安信鑫</text>
					<view class="content_box">
						<view class="scr_left">
							<text>12.33%</text>
							<text>近一个月年化收益率</text>
						</view>
						<view class="scr_right">
							<text>
								60
								<text>天</text>
							</text>
							<text>投资期限</text>
						</view>
					</view>
				</view>
				<view class="scr_A">
					<text class="title_box">小金罐</text>
					<view class="content_box">
						<view class="scr_left">
							<text>4.392%</text>
							<text>近一个月年化收益率</text>
						</view>
						<view class="scr_right">
							<text>
								60
								<text>天</text>
							</text>
							<text>投资期限</text>
						</view>
					</view>
				</view>
				<view class="scr_A">
					<text class="title_box">小金罐</text>
					<view class="content_box">
						<view class="scr_left">
							<text>4.392%</text>
							<text>近一个月年化收益率</text>
						</view>
						<view class="scr_right">
							<text>
								60
								<text>天</text>
							</text>
							<text>投资期限</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="strict_box"><text>严选理财</text></view>
		<view class="tab_box">
			<view class="tabTop_box">
				<view class="left_a" :class="[isActiveA ? 'active-tab' : '']" @tap="tapA">
					<text>短期周转</text>
					<text>随存随取，闲钱增值</text>
				</view>
				<view class="right_a" :class="[isActiveB ? 'active-tab' : '']" @tap="tapB">
					<text>长期增值</text>
					<text>收益更高，提前锁定</text>
				</view>
			</view>
			<view class="cent_box">
				<view v-show="isActiveA" v-for="item in ManagersList" :key="item.fundCode">
					<view class="content_frame">
						<view class="title_a">
							<text>{{item.name}}</text>
							<text>收益稳赚</text>
						</view>
						<view class="flex_a">
							<view class="sub_a">
								<text class="text_a">{{item.yearUp}}</text>
								<text>近三个月年化收益率</text>
							</view>
							<view class="sub_b">
								<text class="text_b">
									90
									<text>天</text>
								</text>
								<text>投资期限</text>
							</view>
							<view class="sub_c">
								<text class="text_c">
									1000
									<text>元</text>
								</text>
								<text>起投金额</text>
							</view>
						</view>
					</view>
				</view>
				<view class="" v-show="isActiveB">
					<text>长期增值</text>
				</view>
			</view>
			<navigator url="../fund_Bone/fund_Bone" hover-class="none">
				<view class="btm_box"><text>查看更多</text></view>
			</navigator>
		</view>
	</view>
</template>

<script>
	// import { createNamespacedHelpers } from 'vuex';
	// let { mapState, mapActions } = createNamespacedHelpers('manager');
	import conduct from '../../components/common/haed.vue';
	export default {
		components: {
			conduct,
		},
		data() {
			return {
				isActiveA: true,
				isActiveB: false,
				ManagersList: [{
						fundCode: "000001",
						name: "华夏成长混合",
						yearUp: "19.370%"
					},
					{
						fundCode: "000002",
						name: "中海可转债债券A",
						yearUp: "7.020%"
					},
					{
						fundCode: "000003",
						name: "嘉实增强信用定期债券",
						yearUp: "-3.130%"
					},
				]
			};
		},
		computed: {},
		methods: {
			// ...mapActions([`getAll`]),
			// 切换
			tapA() {
				this.isActiveA = true;
				this.isActiveB = false;
			},
			tapB() {
				this.isActiveB = true;
				this.isActiveA = false;
			},
		},
	};
</script>

<style lang="scss">
	@import 'css/manager.scss';

	.active-tab {
		background: #77a7ff;

		text {
			color: #ffffff !important;

			&:nth-child(1) {
				font-weight: bold;
			}
		}
	}
</style>
